{if $type == 1}{$title = "申请退货"}{elseif $type == 2}{$title = "申请换货"}{else}{$title = "申请维修"}{/if}
{include_core file="m/lib/header.html" title=$title center="center"}
<style>
  .service-image>div.image-chunk{
    width:46px;
    height:46px;
    overflow: hidden;
    position: relative;
    float:left;
    margin: 0px 5px 5px 0px;
    border:1px solid #d9d9d9;
  }
  .service-image>div.image-chunk img{
    width:100%;
    height: auto;
  }
  .service-image>div.image-chunk .close{
    display: block;
    position: absolute;
    top: 2px;
    right: 2px;
    background: url({$smarty.const.SITE_URL}/images/close3.png) no-repeat;
    width: 16px;
    height: 16px;
    z-index: 8;
    cursor: pointer;
    text-align: center;
  }
  .service-image>div.image-chunk:hover{
    border :1px solid #c50e1a;
  }
  .service-image>div.image-chunk .progress{
    position: absolute;
    bottom: 0px;
    left:0px;
    width:0px;
    height:5px;
    background: #05A;
    z-index:8;
  }
  .image-input{
    width: 48px;
    height: 48px;
    position: absolute;
    z-index: 88px;
    filter:alpha(opacity=0);
    -moz-opacity:0;
    opacity:0;
  }
  .peninfo ul li.pen-curr>span{
    display: inline-block !important;
  }
</style>
<div class="service ">
  <div class="service-list">
    {foreach $order_detail as $k => $v}
    {if $v.is_gift == 0}
    {$relation_id = $v.id}
    {$is_select = $relation_num[$relation_id]}
    <div class="serce-box js_sltGoods clearfix" {if $type == 1}data-is_slt="1"{else}data-is_slt="{if $is_select >= 1}1{else}0{/if}"{/if} {if $type==1}data-num="{$v.goods_num}"{else}data-num="{if $is_select >= 1 && $relation_num[$relation_id] >= $v.goods_num}{$is_select}{else}1{/if}"{/if} data-max_num="{$v.goods_num}" data-id="{$relation_id}" data-disabled="{if $v.goods_num < 1}1{/if}">
    {if $type != 1}
      <p class="serce-check">
        <label class="label1 js_sltGoodsCheckbox">
          <span class="check-wrap {if $is_select >= 1}checkd{/if}">
            <input type="checkbox" class="chechbox1" />
          </span>
        </label>
      </p>
    {/if}
      <dl class="clearfix">
        <dt>
          <a href="javascript:void(0);"><img src="{_image($v.goods_cover, 'middle')}" width="125" /></a>
        </dt>
        <dd>
          <p>{$v.goods_title}</p>
          <div class="serce-num">
            <p>单品号：<span>{order_helper::order_id_encode($order_info.id)}</span></p>
            <p>单价：<span>￥{$v.goods_price}</span></p>
          </div>
          {if $v.goods_num > 0 && $type != 1}
          <div class="add-sub clearfix">
            <a href="javascript:;" class="sub sub-disabled js_subNum"></a>
            <span class="txt"><input type="txt" value="1" class="js_goodsNum"/></span>
            <a href="javascript:;" class="add js_addNum {if $v.goods_num == 1}sub-disabled{/if}"></a>
          </div>
          {else}
          <div class="serce-num">
            <p>当前商品正在服务中</p>
          </div>
          {/if}
        </dd>
      </dl>
    </div>
    {/if}
    {/foreach}

    <div class="service-box">
      <div class="describe">
        <h2>问题描述</h2>
        <textarea placeholder="请描述您的产品出现的问题" class="js_reason">{$reason}</textarea>
      </div>
      <div class="service-image js_imageDiv" style="clear: both; width:100%; height:auto; overflow: hidden;padding:10px 0px; ">
        {foreach $img_list as $k=>$v}
        <div data-name="{$v.file_name}" class="image-chunk" data-id="{$v.id}">
          <div class="close js_deleteImg"></div>
          <img src="{_image($v.path)}">
          <div class="progress" data-size="103176" style="width: 0px;"></div>
        </div>
        {/foreach}
        <div class="js_imageInput" style="position: relative; height: 60px; width:60px; float:left ">
          <div class="service-add" style="position: absolute"><h3><img src="{$smarty.const.SITE_URL}/images/m2-images/add.png"/></h3></div>
          <form id="js_fileUploadForm" action="" method="post" enctype="multipart/form-data">
            <input id="js_fileUpload" class="image-input" type="file" name="Filedata" accept="image/gif,image/jpg, image/png" data-url="{AnUrl("core/handler/file_uploader/uploadify")}">
          </form>
        </div>
      </div>
    </div>

    <div class="address js_sltAddress">
      <h2>确认地址</h2>
      <div class="address-box clearfix">
        <div class="address-txt">
          <p>{$order_info.receiver} {$order_info.mobile}</p>
          <p>{$order_info.province} {$order_info.city} {$order_info.district} {$order_info.address}</p>
        </div>
        <div class="address-arrow"><a href="javascript:void(0);"></a></div>
      </div>
    </div>
    
    <form action="{AnUrl('service/save_service')}" method="post" class="js_serviceForm">
      <input type="hidden" name="img" class="js_serviceImg">
      <input type="hidden" name="info[order_id]" value="{$order_info.id}">
      <input type="hidden" class="js_reasonInput"  name="info[reason]" value="">
      <input type="hidden" class="js_addInfoReceiver" name="info[receiver]" value="{$order_info.receiver}">
      <input type="hidden" class="js_addInfoMobile" name="info[mobile]" value="{$order_info.mobile}">
      <input type="hidden" class="js_addInfoProvince" name="info[province]" value="{$order_info.province}">
      <input type="hidden" class="js_addInfoCity" name="info[city]" value="{$order_info.city}">
      <input type="hidden" class="js_addInfoDistrict" name="info[district]" value="{$order_info.district}">
      <input type="hidden" class="js_addInfoAddress" name="info[address]" value="{$order_info.address}">
      <input type="hidden" class="js_relationIds" name="info[relation_ids]" value="">
      <input type="hidden" class="js_serverTypeInp" name="info[service_type]" value="{$type}">
      <input type="hidden" class="js_serviceNumbers" name="info[relation_num]">
    </form>

    <div class="address-check" style="margin: 20px 30px;">
      <p><label class="label1 js_agreen"><span class="check-wrap checkd"><input type="checkbox" class="chechbox1" /></span>我已阅读<a href="javascript:;" class="js_openLink" data-href="{AnUrl('exchange')}">《NBD售后服务政策》</a></label></p>
    </div>
    <div class="address-submit js_submitService" style="margin-bottom:0; padding-bottom:50px;"><a href="javascript:void(0);">提交</a></div>
  </div>
</div>
{load_js file="jquery.ui.widget.js"}
{load_js file="jquery.iframe-transport.js"}
{load_js file="jquery.fileupload.js"}
{load_js file="app/img.js"}
<script>
  $(function(){
    // 图片上传
    /*
    $('#js_fileUpload').on('change', function(e){
      var postUrl = $(this).data('url');
      var fileForm = document.getElementById('js_fileUploadForm');
      var fd = new FormData(fileForm);
      $.ajax({
        url: postUrl,
        type: 'POST',
        data: fd,
        contentType:false,
        processData:false
      }).done(function(result){
        console.log(result);
      }).fail(function(err){
        console.log(err);
      });
    });*/

    $('#js_fileUpload').fileupload({
      dataType: 'json',
      //autoUpload: true,
      acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
      maxFileSize: 5000000,
      done : function(e, data){
        // var ids = $('.js_serviceImg').val();
        // if (ids.length == 0) {
        //   $('.js_serviceImg').val(data.result.id);
        // } else {
        //   $('.js_serviceImg').val(ids+','+data.result.id);
        // }

        $('div[data-name="'+ data.result.file_name +'"]').data('id', data.result.id).attr('data-file', data.result.path);
      },
      progressall:function(e, data){
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('.js_fileProgress').each(function(){
          var size = $(this).data('size');
          var progress = parseInt(data.loaded / size * 100, 10);
          $(this).css({ width:progress+'%' });
        });
        if (progress == 100) {
          $('.js_fileProgress').css({ width:'0px' }).removeClass('js_fileProgress');
        }
      }
    }).on('fileuploadadd', function (e, data) {
      var _this = $(this);
      $.each(data.files, function (index, file) {
        viewImage(file);
        // imgScale.zip(file, { 'scale': 0.5 }, function(f){
        //   console.log(f);
        // });
        // console.log(data);
      });

      data.submit();
    });

    // 删除已上传图片
    $('.js_imageDiv').on('click', '.js_deleteImg', function(){
      var id = $(this).parent().attr('data-id');
      if (id) {
        var ids = $('.js_serviceImg').val().split(',');
        var newIds = new Array();
        if (ids.length > 0) {
          for (var i = 0; i < ids.length; i++) {
            if (ids[i] != id) {
              newIds.push(ids[i]);
            }
          }
          $('.js_serviceImg').val(newIds.join(','));
        }
      }
      $(this).parent().remove();
    });

    $('.js_agreen').on('click', function(e){
      e.preventDefault();

      if ($(this).children('span').hasClass('checkd')) {
        $(this).children('span').removeClass('checkd');
      } else {
        $(this).children('span').addClass('checkd');
      }
    });

    $('.js_sltAddress').on('click', function(e){
      e.preventDefault();
      e.stopPropagation();
      var url = siteUrl+'/service/save_tmp_session';
      var orderId = "{$order_info.id}";
      var ids = getIds().join(',');
      var nums = getNumber().join(',');
      var reason = $('.js_reason').val();
      var type = $('.js_serverTypeInp').val();
      var img = getImgs().join(',');
      $.post(url, { order_id:orderId, ids:ids, num:nums, reason:reason, img:img, type:type }, function(json){
        if (json.info == 'ok') {
          location.href = siteUrl+'/address?type=service';
        } else {
          showMsg(json.info);
        }
      }, 'json');
    });

    {if $type != 1}
    $('.js_sltGoodsCheckbox').on('click', function(e){
      e.stopPropagation();
      var isDisabled = $(this).closest('.js_sltGoods').data('disabled');
      if (isDisabled == 1) {
        return false;
      }

      if ($(this).children('span').hasClass('checkd')) {
        $(this).children('span').removeClass('checkd');
        $(this).closest('.js_sltGoods').data('is_slt', 0);
      } else {
        $(this).children('span').addClass('checkd');
        $(this).closest('.js_sltGoods').data('is_slt', 1);
      }

      return false;
    });
    {/if}

    /**
     * 加
     */
    $('.js_addNum').on('click', function(e){
      e.stopPropagation();
      var currNum = $(this).prev().children('input').val();
      var maxNum  = $(this).closest('.js_sltGoods').data('max_num');
      currNum++;
      $('.js_subNum, .js_addNum').removeClass('sub-disabled');
      if (currNum >= maxNum) {
        currNum = maxNum
        $('.js_addNum').addClass('sub-disabled');
      }
      if (currNum <= 1) {
        currNum = 1;
        $('.js_subNum').addClass('sub-disabled');
      } 
      $(this).closest('.js_sltGoods').data('num', currNum);
      $(this).prev().children('input').val(currNum);
    });

    /**
     * 减
     */
    $('.js_subNum').on('click', function(e){
      e.stopPropagation();
      var currNum = $(this).next().children('input').val();
      var maxNum  = $(this).closest('.js_sltGoods').data('max_num');
      currNum--;
      $('.js_subNum, .js_addNum').removeClass('sub-disabled');
      if (currNum <= 1) {
        currNum = 1;
        $('.js_subNum').addClass('sub-disabled');
      } 
      if (currNum >= maxNum) {
        currNum = maxNum
        $('.js_addNum').addClass('sub-disabled');
      }
      $(this).closest('.js_sltGoods').data('num', currNum);
      $(this).next().children('input').val(currNum);
    });

    /**
     * 修改
     */
    $('.js_goodsNum').on('blur', function(e){
      e.stopPropagation();
      var currNum = $(this).val();
      var maxNum  = $(this).closest('.js_sltGoods').data('max_num');
      currNum = parseInt(currNum);
      if (isNaN(currNum)) {
        currNum = 1;
      }

      $('.js_subNum, .js_addNum').removeClass('sub-disabled');
      if (currNum <= 1) {
        currNum = 1;
        $('.js_subNum').addClass('sub-disabled');
      } 
      if (currNum >= maxNum) {
        currNum = maxNum
        $('.js_addNum').addClass('sub-disabled');
      }

      $(this).closest('.js_sltGoods').data('num', currNum);
      $(this).val(currNum);
    });

    $('.js_submitService').on('click', function(){
      var reason = $('.js_reason').val();
      var ids    = getIds().join(',');
      if (ids.length < 1) {
        showMsg('请选择需要服务的产品');
        return false;
      }
      if (!reason) {
        showMsg('请描述您的产品出现的问题');
        return false;
      }
      if (!$('.js_agreen').children('span').hasClass('checkd')) {
        showMsg('请选择并同意《NBD售后服务政策》');
        return false;
      }

      $('.js_reasonInput').val(reason);
      $('.js_relationIds').val(ids);
      $('.js_serviceNumbers').val(getNumber().join(','));
      $('.js_serviceImg').val(getImgs().join(','));
      $('.js_serviceForm').submit();
    });
  });

function getImgs()
{
  var imgs = new Array();
  $('.js_imageDiv').find('.image-chunk').each(function(){
    var id = parseInt($(this).data('id'));
    if (!isNaN(id) && id > 0){
      imgs.push(id);
    }
  });

  return imgs;
}

function getIds()
  {
    var ids = new Array();
    $('.js_sltGoods').each(function(){
      var isSlt = $(this).data('is_slt');
      if (isSlt == 1) {
        var id = $(this).data('id');
        ids.push(id);
      }
    });

    return ids;
  }

  function getNumber()
  {
    var nums = new Array();
    var ids  = getIds();
    var idsLen = ids.length;
    for (var i = 0; i < idsLen; i++) {
      $('.js_sltGoods').each(function(){
        var id  = $(this).data('id');
        var num = $(this).data('num');
        if (id == ids[i]) {
          nums.push(num);
        }
      });
    }
    return nums;
  }

  //取得文件名的后缀
  function getFileExt(fileName)
  {
    if (!fileName) {
      return '';
    }
    
    var _index = fileName.lastIndexOf('.');
    if (_index < 1) {
      return '';
    }
    
    return fileName.substr(_index+1);
  }

  // 是合格的文件名
  function isAllowFile(fileName, allowType)
  {
    var fileExt = getFileExt(fileName).toLowerCase();
    if (!allowType) {
      allowType = ['jpg', 'jpeg', 'png', 'gif'];
    }

    if ($.inArray(fileExt, allowType) != -1) {
      return true;
    }

    return false;
  }

  function viewImage(file, callback)
  {
    if (typeof FileReader == "undefined") {
      return false;
    }

    var f = file;

    if (!isAllowFile(f.name)) {
      showMsg("请上传常规格式的图片,如：jpg, png等");
      return false;
    }

    var reader = new FileReader();
    reader.onload = (function(theFile){
      return function (e) {
        var tmpSrc = e.target.result;
        if (tmpSrc.lastIndexOf('data:base64') != -1) {
          tmpSrc = tmpSrc.replace('data:base64', 'data:image/jpeg;base64');
        } else if (tmpSrc.lastIndexOf('data:,') != -1) {
          tmpSrc = tmpSrc.replace('data:,', 'data:image/jpeg;base64,');
        }

        var img = '<img src="' + tmpSrc + '" />';
        if ($('div[data-name="'+ f.name +'"]').length > 0) {
          $('div[data-name="'+ f.name +'"]').remove();
        }
        $('.js_imageInput').before('<div data-name="'+ f.name+'" class="image-chunk"><div class="close js_deleteImg"></div>'+img+'<div class="progress js_fileProgress" data-size="'+ f.size +'"></div></div>');
        if (callback) callback(f);
      };
    })(f)
    reader.readAsDataURL(f);
  }
</script>
{include_core file="m/lib/footer.html" center="center"}